<template>
	<view class="code-input-container">
		<view class="label">输入核销码：</view>
		<input type="text" v-model="verificationCode" placeholder="请输入核销码" />
		<button class="recognize-btn" @click="recognizeCode">识别</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 用于存储输入的核销码
	const verificationCode = ref('');

	// 识别核销码的方法，这里先简单打印，实际需对接业务逻辑
	const recognizeCode = () => {
		console.log('点击识别按钮，输入的核销码为：', verificationCode.value);
	};
</script>

<style scoped>
	.code-input-container {
		display: flex;
		align-items: center;
		padding: 30rpx;
	}

	.label {
		font-size: 30rpx;
		/* margin-right: 10rpx; */
		font-weight: 550;
	}

	input {
		flex: 1;
		width: 400rpx;
		height: 60rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		margin-right: 20rpx;
		font-size: 30rpx;

	}

	.recognize-btn {
		width: 116rpx;
		height: 60rpx;
		padding: 0 30rpx;
		background-color: #007AFF;
		color: #fff;
		border: none;
		border-radius: 10rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>